<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    input.ng-invalid {
        border: 1px solid red;
    }
    
    input.ng-valid {
        border: 1px solid green;
    }
    </style>
</head>

<body>
    <form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" novalidate>
        <div ng-repeat="field in fields" ng-form="signup_form_input">
            <input type="text" ng-required="field.isRequired" ng-model="field.name" placeholder="{{field.placeholder}}">
            <div ng-show="signup_form_input.dynamic_input.$dirty && signup_form_input.dynamic_input.$invalid">
                <span class="error" ng-show="signup_form_input.dynamic_input.$error.required">The field is required.</span>
            </div>
        </div>
        <button type="submit" ng-disabled="signup_form.$invalid">Submit All</button>
    </form>
    <script src="framework/1.3.0.14/angular.js"></script>
    <script src="Directive_Form.js"></script>
</body>

</html>
